<template>
  <el-dialog v-model="dialogFormVisible" draggable :title="title" width="600px" @close="closeDialog">
    <el-form ref="formRef" :inline="true" label-width="130px" :model="formData" :rules="rules" status-icon>
      <el-form-item label="审批意见" label-width="80px" style="width: 98%; margin-bottom: 2px">
        <el-input v-model="dealresult" maxlength="156" placeholder="请输入" :rows="3" show-word-limit type="textarea" />
      </el-form-item>
      <el-form-item label="    " label-width="80px" style="width: 98%">
        <el-row style="width: 100%">
          <el-col :span="20">
            <CommonSelectTable v-model="selectRows" :column-list="columnList" :show-label-list="false" :url="url">
              <template #selectTableSlot>
                <a href="javascript:void(0);">我的常用语</a>
              </template>
            </CommonSelectTable>
          </el-col>
          <el-col :span="4" style="text-align: right">
            <processWords>
              <template #dialogSlot>
                <a href="javascript:void(0);">常用语管理</a>
              </template>
            </processWords>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item v-show="isShowNode" label="下一节点" label-width="80px" style="width: 98%">
        <div v-for="(item, index) in approveNodes" :key="index">
          【{{ item.nodeName }}】
          <span>
            <el-select v-model="selApprovers" multiple placeholder="请选择审批用户" style="width: 300px">
              <el-option v-for="approver in item.approvers" :key="approver.id" :label="approver.username" :value="approver.id" />
            </el-select>
          </span>
        </div>
      </el-form-item>
    </el-form>
    <div style="height: 30px">
      <el-button style="float: right" @click="closeDialog">取 消</el-button>
      <el-button style="float: right; margin-right: 5px" type="warning" @click="handlePassTarget"> 通过 </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Plus, Search, Close, Check } from "@element-plus/icons-vue";
import { postRequest } from "@/api/mains";
import CommonSelectTable from "@/plugins/selectTable/CommonSelectTable.vue";
import processWords from "@/components/workflow/buss/processWords.vue";
import { confirm } from "@/utils/MessageUtils";
import { ElLoading } from "element-plus";
export default {
  name: "RejectDailog",
  components: { CommonSelectTable, processWords },
  props: {
    bid: {
      type: String,
      default: () => ""
    },
    burl: {
      type: String,
      default: () => ""
    }
  },
  emits: {
    callBackPassNode: null
  },
  setup(props, { emit }) {
    const state = reactive({
      formData: [],
      approveNodes: [],
      targetNodeKey: "",
      dealresult: "",
      dialogFormVisible: false,
      title: "",
      bid: "",
      isShowNode: false
    });

    const selApprovers = ref([]);

    const showPassDialog = async () => {
      const postData = {};
      postData.bid = props.bid;
      postData.targetNodeCode = state.targetNodeKey;

      const loading = ElLoading.service({
        lock: true,
        text: "请稍候...",
        background: "rgba(0, 0, 0, 0.7)"
      });
      const responseData = await postRequest(`${props.burl}/dataNextApproveNode`, postData);
      loading.close();
      if (responseData.code == 200) {
        state.title = "审批";
        state.dialogFormVisible = true;
        state.processKey = Math.random();
        const _approveNodeList = responseData.data.approveNodeList;
        if (_approveNodeList != null && _approveNodeList.length > 0) {
          state.isShowNode = true;
          state.approveNodes = _approveNodeList;
        } else {
          state.isShowNode = false;
        }
      } else {
        state.isShowNode = false;
      }
    };

    const handlePassTarget = () => {
      confirm("你确定要通过吗", async () => {
        emit("callBackPassNode", state.targetNodeKey, state.dealresult, selApprovers);
        closeDialog();
      });
    };

    const closeDialog = () => {
      state.targetNodeKey = "";
      state.dealresult = "";
      state.dialogFormVisible = false;
      state.isShowNode = false;
    };

    const columnList = [
      {
        type: "index",
        fixed: "left"
      },
      {
        label: "常用语",
        value: "content",
        align: "left",
        overflow: true
      }
    ];
    const url = "processWords";
    const selectRows = ref([]);

    watch(
      () => selectRows,
      newVal => {
        if (newVal && newVal.value.length > 0) {
          state.dealresult = newVal.value[0].content;
        }
      },
      {
        deep: true,
        immediate: true
      }
    );

    return {
      ...toRefs(state),
      showPassDialog,
      handlePassTarget,
      closeDialog,
      Plus,
      Search,
      Close,
      Check,
      selApprovers,
      columnList,
      url,
      selectRows
    };
  }
};
</script>
<style lang="scss" scoped>
.yy-page-container {
  height: 70vh;
}
</style>
